<template>
<div class="page page4" :style="index>=0&&'background: #fff;'">
  <div class="contant">
    <div class="head" :class="renderClass()"/>
    <div @click="$emit('setPage',1)" class="btn"/>
    <div class="main" :class="[6,7,8,11,12].includes(index)?'m4':'m3'"/>
    <!-- index -->
    <div class="index">
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="show&&index===-1" class="text" />
      </transition>
    </div>
    <!-- 1 -->
    <div class="a1">
      <transition name="fade" @after-enter="$set(a1,0,true)">
        <div v-show="show&&index===0" class="banner">
          <transition name="fade" @after-enter="$set(a1,1,true)">
            <div v-show="a1[0]&&index===0" class="t3" />
          </transition>
        </div>
      </transition>
      <transition name="fade" @after-enter="$set(a1,2,true)">
        <div v-show="a1[1]&&index===0" class="t1">
          <transition name="fade" @after-enter="$set(a1,3,true)">
            <div v-show="a1[2]&&index===0" class="t4" />
          </transition>
        </div>
      </transition>
      <transition name="fade" @after-enter="$set(a1,4,true)">
        <div v-show="a1[3]&&index===0" class="t2">
          <transition name="fade" @after-enter="showBtn = true">
            <div v-show="a1[4]&&index===0" class="t5" />
          </transition>
        </div>
      </transition>
    </div>
    <!-- 2 -->
    <div class="a2">
      <transition name="fade" @after-enter="$set(a2,0,true)">
        <div v-show="show&&index===1" class="banner" />
      </transition>
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="a2[0]&&index===1" class="t1" />
      </transition>
    </div>
    <!-- 3 -->
    <div class="a3">
      <transition name="fade" @after-enter="$set(a3,0,true)">
        <div v-show="show&&index===2" class="banner" />
      </transition>
      <transition name="fade" @after-enter="$set(a3,1,true)">
        <div v-show="a3[0]&&index===2" class="t1" />
      </transition>
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="a3[1]&&index===2" class="t2" />
      </transition>
    </div>
    <!-- 4 -->
    <div class="a4">
      <transition name="fade" @after-enter="$set(a4,0,true)">
        <div v-show="show&&index===3" class="banner">
          <transition name="fade" @after-enter="$set(a4,1,true)">
            <div v-show="a4[0]&&index===3" class="t1" />
          </transition>
        </div>
      </transition>
      <transition name="fade" @after-enter="$set(a4,2,true)">
        <div v-show="a4[1]&&index===3" class="t2">
          <transition name="fade" @after-enter="showBtn = true">
            <div v-show="a4[2]&&index===3" class="t3" />
          </transition>
        </div>
      </transition>
    </div>
    <!-- 5 -->
    <div class="a5" v-show="show&&index===4">
      <transition name="fade">
        <div v-show="a5[6]&&index===4" class="t3" />
      </transition>
      <transition name="fade">
        <div v-show="a5[6]&&index===4" class="t6" />
      </transition>
      <transition name="fade">
        <div v-show="a5[6]&&index===4" class="t9" />
      </transition>
      <transition name="fade-round" @after-enter="set('a5',2,true,1500);!a5[6]&&set('a5',0,false,1000)">
        <div v-show="show&&index===4&&a5[0]" class="round1">
          <div class="t1 rotate" v-if="a5[6]&&index===4" />
          <div class="t1" v-else/>
          <div class="t2" />
        </div>
      </transition>
      <!-- <transition name="slide-round" @after-enter="set('a5',1,false,1000);set('a5',0,false,1000)" @after-leave="index===4&&$set(a5,2,true);">
        <div v-show="a5[1]&&index===4" class="t3" />
      </transition> -->
      <transition name="fade-round" @after-enter="!a5[6]&&set('a5',4,true,1500);!a5[6]&&set('a5',2,false,1000)">
        <div v-show="a5[2]&&index===4" class="round2">
          <div class="t4 rotate" v-if="a5[6]&&index===4" />
          <div class="t4" v-else/>
          <div class="t5" />
        </div>
      </transition>
      <!-- <transition name="slide-bottom1" @after-enter="set('a5',3,false,1000);set('a5',2,false,1000)" @after-leave="index===4&&$set(a5,4,true);">
        <div v-show="a5[3]&&index===4" class="t6" />
      </transition> -->
      <transition name="fade-round" @after-enter="a5ShowAll();!a5[6]&&set('a5',4,false,1000);">
        <div v-show="a5[4]&&index===4" class="round3">
          <div class="t7 rotate" v-if="a5[6]&&index===4" />
          <div class="t7" v-else/>
          <div class="t8" />
        </div>
      </transition>
      <!-- <transition name="slide-bottom2" @after-enter="set('a5',4,false,1000);set('a5',5,false,1000)" @after-leave="a5ShowAll">
        <div v-show="a5[5]&&index===4" class="t9" />
      </transition> -->
    </div>
    <!-- 6 -->
    <div class="a6">
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="show&&index===5" class="banner" />
      </transition>
    </div>
    <!-- 7 -->
    <div class="a7">
      <div v-show="show&&index===6" class="banner" />
      <img :src="c7Src" class="c7_gif" v-show="index===6"/>
    </div>
    <!-- 8 -->
    <div class="a8">
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="show&&index===7" class="banner" />
      </transition>
    </div>
    <!-- 9 -->
    <div class="a9">
      <transition name="fade" @after-enter="$set(a9,0,true)">
        <div v-show="show&&index===8" class="banner">
          <transition name="fade" @after-enter="showBtn = true">
            <div v-show="a9[0]&&index===8" class="t1" />
          </transition>
        </div>
      </transition>
    </div>
    <!-- 10 -->
    <div class="a10">
      <transition name="fade" @after-enter="$set(a10,0,true)">
        <div v-show="show&&index===9" class="banner" />
      </transition>
      <transition name="fade" @after-enter="$set(a10,1,true)">
        <div v-show="a10[0]&&index===9" class="t1" />
      </transition>
      <transition name="fade" @after-enter="$set(a10,2,true)">
        <div v-show="a10[1]&&index===9" class="t2" />
      </transition>
      <transition name="fade" @after-enter="$set(a10,3,true)">
        <div v-show="a10[2]&&index===9" class="t3" />
      </transition>
      <transition name="fade" @after-enter="$set(a10,4,true)">
        <div v-show="a10[3]&&index===9" class="t4" />
      </transition>
      <transition name="fade" @after-enter="$set(a10,5,true)">
        <div v-show="a10[4]&&index===9" class="t5" />
      </transition>
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="a10[5]&&index===9" class="t6" />
      </transition>
    </div>
    <!-- 11 -->
    <div class="a11">
      <transition name="fade" @after-enter="$set(a11,0,true)">
        <div v-show="show&&index===10" class="banner" />
      </transition>
      <div v-show="pageIndex===0">
        <transition name="fade" @after-enter="$set(a11,1,true);">
          <div v-show="a11[0]&&index===10" class="t1" />
        </transition>
      </div>
      <transition name="fade">
        <div v-show="a11[1]&&index===10" class="showBtn" @click="showImg" />
      </transition>
      <transition name="fade" @after-enter="$set(a11,2,true)">
        <div v-show="a11[1]&&index===10" class="icon-box">
          <span v-for="(v,i) in imgList" :key="i" class="icon" :class="pageIndex===i?'act':'unact'" />
        </div>
      </transition>
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="a11[2]&&index===10" class="t4" :class="renderTextClass" />
      </transition>
    </div>
    <!-- 12 -->
    <div class="a12" v-show="show&&index===11">
      <transition name="fade" :duration="1000" @after-enter="$set(a12,0,true)">
        <div v-show="show&&index===11" class="banner" />
      </transition>
      <transition name="fade" @after-enter="showBtn = true">
        <div v-show="a12[0]&&index===11" class="t1" />
      </transition>
    </div>
    <!-- 13 -->
    <div class="a13">
      <transition name="slide-into" @after-enter="$set(a13,0,true)">
        <div v-show="show&&index===12" class="banner" />
      </transition>
      <transition-group name="fade-shot" @after-enter="listAfterEnter">
        <div v-show="a13[i]&&index===12" :class="`s${v}`" v-for="(v,i) in 10" :key="i" :index="v">
          <span class="round-icon" />
          <span :class="`t${v}`" />
        </div>
      </transition-group>
    </div>
    <div class="bottom"/>
    <div :style="{opacity:a11[1]&&index===10?1:0}" style="position:absolute;width:100%;height:100%;top:0;:left:0;">
      <transition name="fade">
        <div v-show="index===-1||index===0||(a11[1]&&index===10)" style="position:absolute;width:100%;height:100%;top:0;:left:0;">
          <div class="scroll-wrapper" ref="scroll">
            <div class="scroll-contianer">
              <div class="img" style="display:block;" v-for="(v,i) in imgList" :key="i">
                <img :src="v" width="100%" />
              </div>
            </div>
          </div>
        </div>
      </transition>
      <div class="flower" @click="next" style="z-index:10000;opacity:0;" v-show="showBtn"/>
    </div>
    <div class="flower" @click="next" v-show="index>=-1&&index<=12&&c7show&&showBtn" />
    <div class="flowerP" @click="prev" v-show="index>=0&&c7show&&showBtn"/>
  </div>
  <div class="img-box" v-show="modal" @click="modal=false">
    <img :src="showSrc">
  </div>
</div>
</template>

<script>
const RATE = window.screen.height/window.screen.width
import BScroll from 'better-scroll'
// import c7 from '../../public/img/c7_1.gif'
// import c7_pad from '../../public/img/c7_1.gif'
export default {
  name: 'page4',
  props:{
    show: {
      type:Boolean,
      default(){
        return false
      }
    },
  },
  watch:{
    show(){
      if (this.show) {
        this.index = -1
        this.showBtn = false
      }
    }
  },
  data() {
    return {
      a1: [false, false,false, false,false],
      a2: [false],
      a3: [false, false],
      a4: [false],
      a5: [false, false, false, false, false, false],
      a7:[false],
      a9: [false, false, false, false, false],
      a10: [false, false, false, false, false, false, false],
      a11: [false, false, false, false, false, false, false],
      a12: [false],
      a13: [false, false, false, false, false],
      index: -1,
      imgList: [require('@/assets/img0.png'), require('@/assets/img1.jpg'), require('@/assets/img2.png'), require('@/assets/img3.png')],
      bigList: [require('@/assets/img0r.jpg'), require('@/assets/img1r.jpg'), require('@/assets/img2r.jpg'), require('@/assets/img3r.jpg')],
      myScroll: null,
      pageIndex: 0,
      showSrc: '',
      modal: false,
      c7Src:'',
      c7show:true,
      showBtn:false,
      baseUrl: process.env.BASE_URL
    }
  },
  computed: {
    renderTextClass() {
      switch (this.pageIndex) {
        case 0:
        case 1:
          return 'text_1'
          break;
        case 2:
          return 'text_2'
          break;
        case 3:
          return 'text_3'
          break;
        default:
          break;
      }
    }
  },
  created(){
  },
  mounted() {
    this.scrollInit()
  },
  methods: {
    scrollInit() {
      if (this.myScroll) {
        return
      }
      this.myScroll = new BScroll(this.$refs.scroll, {
        scrollX: true,
        probeType: 3,
        momentum: false,
        stopPropagation: true,
        bindToWrapper: true,
        snap: {
          loop: false,
          threshold: 1,
          easing: {
            style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
          }
        }
      })
      this.myScroll.currentPage.pageX = 0
      this.myScroll.on('scrollEnd', () => {
        if (!this.myScroll.currentPage.pageX) {
          this.myScroll.currentPage.pageX = 0
        }
        this.pageIndex = this.myScroll.currentPage.pageX>=4?3:this.myScroll.currentPage.pageX
      })
    },
    next() {
      if (this.index >= 12) {
        this.$emit('setPage',4)
      } else {
        this.index++
        if (this.index===6) {
          this.c7show = false
          this.c7Src = `${this.baseUrl}img/c7_1.gif?${Date.parse(new Date())}`
          const setTime = setTimeout(() => {
            this.c7show = true
            this.showBtn = true
            clearTimeout(setTime)
          }, 2000)
        }
        this.closs()
      }
    },
    prev() {
      this.index--
      if (this.index===6) {
        this.c7show = false
        this.c7Src = `${this.baseUrl}img/c7_1.gif?${Date.parse(new Date())}`
        const setTime = setTimeout(() => {
          this.c7show = true
          this.showBtn = true
          clearTimeout(setTime)
        }, 2000)
      }
      this.closs()
    },
    set(key, i, val, time) {
      const setTime = setTimeout(() => {
        this.$set(this[key], i, val)
        clearTimeout(setTime)
      }, time)
    },
    a5ShowAll() {
      const setTime = setTimeout(() => {
        if (this.index === 4) {
          this.$set(this.a5, 6, true)
          this.$set(this.a5, 0, true)
          this.$set(this.a5, 2, true)
          this.$set(this.a5, 4, true)
          this.showBtn = true
        }
        clearTimeout(setTime)
      }, 2000)
    },
    listAfterEnter(el) {
      if (el.attributes.index.value >= 10) {
        this.showBtn = true
        return
      }
      this.$set(this.a13, el.attributes.index.value, true)
    },
    showImg() {
      this.showSrc = this.bigList[this.pageIndex]
      this.modal = true
    },
    closs() {
      let arr = ['a1', 'a2', 'a3', 'a4', 'a5', 'a5', 'a7','a9', 'a10', 'a11', 'a12', 'a13']
      let i = this.index
      arr.forEach(v => {
        if (v !== `a${i}`) {
          this[v].forEach((res, i) => {
            this.$set(this[v], i, false)
          })
        }
      })
      this.$set(this.a5, 0, true)
      if(this.myScroll){
        this.myScroll.currentPage.pageX = 0
      }
      this.showBtn = false
    },
    renderClass() {
      if ([0, 1, 2].includes(this.index)) {
        return 'h1'
      } else if ([3, 4, 5, 6, 7, 8, 9].includes(this.index)) {
        return 'h2'
      } else if ([10, 11].includes(this.index)) {
        return 'h3'
      } else if ([12].includes(this.index)) {
        return 'h4'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
@keyframes shin
  0%
    opacity: 0;

  50%
    opacity: 1;
@keyframes rotate
  0%
    transform: rotateZ(0deg);
  100%
    transform: rotateZ(360deg);
.fade-enter-active
  transition: all 0.5s cubic-bezier(1, 0.5, 0.3, 0.1);
  opacity: 1;
.fade-enter
  opacity: 0;
.page4
  background: url('~assets/b1.jpg') no-repeat;
  background-size: 100% 100%;
  position: relative;
  .gif
    display: block;
    width: 100vw;
    height: calc(100vw*(1235/640));
    position: absolute;
    top: 50vh;
    margin-top: calc(-50vw*(1235/640));
    z-index: 0;
  .contant
    width: 100vw;
    height: calc(100vw*(950/640));
    position: absolute;
    top: 50vh;
    margin-top: calc(-50vw*(950/640));
    overflow: hidden;
    .head
      position: absolute;
      top: 0;
      left: calc(100vw*(16/640));
    .h1
      width: calc(100vw*(149/640));
      height: calc(100vw*(35/640));
      background: url('~assets/h11.png') no-repeat;
      background-size: 100% 100%;
    .h2
      width: calc(100vw*(261/640));
      height: calc(100vw*(35/640));
      background: url('~assets/h14.png') no-repeat;
      background-size: 100% 100%;
    .h3
      width: calc(100vw*(281/640));
      height: calc(100vw*(35/640));
      background: url('~assets/h19.png') no-repeat;
      background-size: 100% 100%;
    .h4
      width: calc(100vw*(367/640));
      height: calc(100vw*(35/640));
      background: url('~assets/h21.png') no-repeat;
      background-size: 100% 100%;
    .main
      width: calc(100vw*(608/640));
      height: calc(100vw*(829/640));
      position: absolute;
      left: 50%;
      top: calc(100vw*(53/640));
      margin-left: calc(-50vw*(608/640));
    .m3
      background: url('~assets/m3.png') no-repeat;
      background-size: 100% 100%;
    .m4
      background: url('~assets/m4.png') no-repeat;
      background-size: 100% 100%;
    .fade-long-enter-active
      transition: all 1s cubic-bezier(1, 0.5, 0.3, 0.1);
      opacity: 1;
    .fade-long-enter
      opacity: 0;
    .fade-inout-enter-active,.fade-inout-leave-active
      animation: fade 4s
    @keyframes fade
      0%
        opacity: 0;
      40%
        opacity: 1;
      60%
        opacity: 1;
      100%
        opacity: 0;
    .zoom-enter-active
      transition: all 0.5s cubic-bezier(0.1,0.3,0.5,1);
      transform: scale(1);
      opacity: 1;
    .zoom-enter
      transform: scale(2);
      opacity: 0;
    .slide-enter-active
      transition: all 2s;
    .slide-enter
      transform: translateX(calc(-100vw*(572/640)));
      opacity: 0;
    .index
      .text
        width: calc(100vw*(504/640));
        height: calc(100vw*(213/640));
        position: absolute;
        top: calc(100vw*(360/640));
        left: calc(100vw*(71/640));
        background: url('~assets/t10.png') no-repeat;
        background-size: 100% 100%;
    .a1
      .banner
        width: calc(100vw*(535/640));
        height: calc(100vw*(376/640));
        position: absolute;
        top: calc(100vw*(70/640));
        left: calc(100vw*(52/640));
        background: url('~assets/c1_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(356/640));
        height: calc(100vw*(349/640));
        position: absolute;
        top: calc(100vw*(470/640));
        left: calc(100vw*(52/640));
        background: url('~assets/c1_2.png') no-repeat;
        background-size: 100% 100%;
      .t2
        width: calc(100vw*(170/640));
        height: calc(100vw*(349/640));
        position: absolute;
        top: calc(100vw*(470/640));
        right: calc(100vw*(54/640));
        background:#fff url('~assets/c1_3.png') no-repeat;
        background-size: 100% 100%;
      .t3
        width: calc(100vw*(535/640));
        height: calc(100vw*(41/640));
        position: absolute;
        left: 0;
        bottom: -1px;
        background:#fff url('~assets/c1_4.png') no-repeat;
        background-size: 100% 100%;
      .t4
        width: calc(100vw*(356/640));
        height: calc(100vw*(41/640));
        position: absolute;
        left: 0;
        bottom: 0;
        background:#fff url('~assets/c1_5.png') no-repeat;
        background-size: 100% 100%;
      .t5
        width: calc(100vw*(170/640));
        height: calc(100vw*(41/640));
        position: absolute;
        left: 0;
        bottom: 0;
        background:#fff url('~assets/c1_6.png') no-repeat;
        background-size: 100% 100%;
    .a2
      .banner
        width: calc(100vw*(575/640));
        height: calc(100vw*(385/640));
        position: absolute;
        top: calc(100vw*(69/640));
        left: calc(100vw*(33/640));
        background: url('~assets/c2_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(575/640));
        height: calc(100vw*(349/640));
        position: absolute;
        top: calc(100vw*(467/640));
        right: calc(100vw*(33/640));
        background: url('~assets/c2_2.png') no-repeat;
        background-size: 100% 100%;
    .a3
      .banner
        width: calc(100vw*(498/640));
        height: calc(100vw*(258/640));
        position: absolute;
        top: calc(100vw*(71/640));
        left: calc(100vw*(71/640));
        background: url('~assets/c3_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(498/640));
        height: calc(100vw*(239/640));
        position: absolute;
        top: calc(100vw*(341/640));
        left: calc(100vw*(71/640));
        background: url('~assets/c3_2.png') no-repeat;
        background-size: 100% 100%;
      .t2
        width: calc(100vw*(498/640));
        height: calc(100vw*(225/640));
        position: absolute;
        top: calc(100vw*(593/640));
        left: calc(100vw*(71/640));
        background: url('~assets/c3_3.png') no-repeat;
        background-size: 100% 100%;
    .a4
      .banner
        width: calc(100vw*(574/640));
        height: calc(100vw*(332/640));
        position: absolute;
        top: calc(100vw*(71/640));
        left: calc(100vw*(33/640));
        background: url('~assets/c4_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(574/640));
        height: calc(100vw*(57/640));
        position: absolute;
        bottom: 0;
        left: 0;
        background:#fff url('~assets/c4_2.png') no-repeat;
        background-size: 100% 100%;
      .t2
        width: calc(100vw*(574/640));
        height: calc(100vw*(403/640));
        position: absolute;
        top: calc(100vw*(413/640));
        left: calc(100vw*(33/640));
        background: url('~assets/c4_3.png') no-repeat;
        background-size: 100% 100%;
      .t3
        width: calc(100vw*(574/640));
        height: calc(100vw*(52/640));
        position: absolute;
        bottom: 0;
        left: 0;
        background:#fff  url('~assets/c4_4.png') no-repeat;
        background-size: 100% 100%;
    .a5
      .fade-round-enter-active,.fade-round-leave-active
        transition: all 0.5s;
        opacity: 1;
      .fade-round-enter
        opacity: 0;
      .fade-round-leave-to
        opacity: 0;
      .slide-round-enter
        transform: translateX(calc(100vw*(42/640) - 100%));
        opacity: 0;
      .slide-round-enter-active,.slide-round-leave-active
        transition: all 0.5s;
      .slide-round-leave-to
        opacity: 0;
      .slide-bottom1-enter
        transform: translateY(calc(100vw*(205/640) + 100%));
        opacity: 0;
      .slide-bottom1-enter-active,.slide-bottom1-leave-active
        transition: all 0.5s;
      .slide-bottom1-leave-to
        opacity: 0;
      .slide-bottom2-enter
        transform: translateY(calc(100vw*(205/640) + 100%));
        opacity: 0;
      .slide-bottom2-enter-active,.slide-bottom2-leave-active
        transition: all 0.5s;
      .slide-bottom2-leave-to
        opacity: 0;
      .rotate
        animation:rotate linear 1.5s infinite both;
      .round1
        width: calc(100vw*(232/640));
        height: calc(100vw*(233/640));
        position: absolute;
        top: calc(100vw*(165/640));
        right: calc(100vw*(99/640));
        .t1
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: url('~assets/c5_1.png') center center no-repeat;
          background-size: 100% 100%;
        .t2
          width: calc(100vw*(77/640));
          height: calc(100vw*(34/640));
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: calc(-50vw*(34/640));
          margin-left: calc(-50vw*(77/640));
          background: url('~assets/c5_2.png') no-repeat;
          background-size: 100% 100%;
      .t3
        width: calc(100vw*(260/640));
        height: calc(100vw*(113/640));
        position: absolute;
        top: calc(100vw*(91/640));
        left: calc(100vw*(42/640));
        background: url('~assets/c5_3.png') no-repeat;
        background-size: 100% 100%;
      .round2
        width: calc(100vw*(263/640));
        height: calc(100vw*(269/640));
        position: absolute;
        top: calc(100vw*(307/640));
        left: calc(100vw*(59/640));
        .t4
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: url('~assets/c5_4.png') center center no-repeat;
          background-size: 100% 100%;
        .t5
          width: calc(100vw*(75/640));
          height: calc(100vw*(35/640));
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: calc(-50vw*(35/640));
          margin-left: calc(-50vw*(75/640));
          background: url('~assets/c5_5.png') center center no-repeat;
          background-size: 100% 100%;
      .t6
        width: calc(100vw*(248/640));
        height: calc(100vw*(113/640));
        position: absolute;
        top: calc(100vw*(623/640));
        left: calc(100vw*(42/640));
        background: url('~assets/c5_6.png') no-repeat;
        background-size: 100% 100%;
      .round3
        width: calc(100vw*(292/640));
        height: calc(100vw*(298/640));
        position: absolute;
        top: calc(100vw*(400/640));
        right: calc(100vw*(35/640));
        .t7
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: url('~assets/c5_7.png') no-repeat;
          background-size: 100% 100%;
        .t8
          width: calc(100vw*(76/640));
          height: calc(100vw*(35/640));
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: calc(-50vw*(35/640));
          margin-left: calc(-50vw*(76/640));
          background: url('~assets/c5_8.png') no-repeat;
          background-size: 100% 100%;
      .t9
        width: calc(100vw*(262/640));
        height: calc(100vw*(79/640));
        position: absolute;
        top: calc(100vw*(721/640));
        right: calc(100vw*(58/640));
        background: url('~assets/c5_9.png') no-repeat;
        background-size: 100% 100%;
    .a6
      .banner
        width: calc(100vw*(385/640));
        height: calc(100vw*(279/640));
        position: absolute;
        top: calc(100vw*(326/640));
        left: calc(100vw*(130/640));
        background: url('~assets/c6_1.png') no-repeat;
        background-size: 100% 100%;
    .a7
      .banner
        width: calc(100vw*(568/640));
        height: calc(100vw*(750/640));
        position: absolute;
        top: calc(100vw*(72/640));
        left: 50%;
        margin-left: calc(-50vw*(568/640));
        background: url('~assets/c7_2.png') no-repeat;
        background-size: 100% 100%;
      .c7_gif
        width: calc(100vw*(236/640));
        height: calc(100vw*(60/640));
        position: absolute;
        top: calc(100vw*(768/640));
        left:50%;
        transform: translateX(-50%);
        margin: 0;
    .a8
      .banner
        width: calc(100vw*(569/640));
        height: calc(100vw*(750/640));
        position: absolute;
        top: calc(100vw*(72/640));
        left: calc(100vw*(36/640));
        background: url('~assets/c8_1.png') no-repeat;
        background-size: 100% 100%;
    .a9
      .banner
        width: calc(100vw*(575/640));
        height: calc(100vw*(750/640));
        position: absolute;
        top: calc(100vw*(71/640));
        left: calc(100vw*(33/640));
        background: url('~assets/c9_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(575/640));
        height: calc(100vw*(41/640));
        position: absolute;
        bottom: 0;
        left: 0;
        background:#fff url('~assets/c9_2.png') no-repeat;
        background-size: 100% 100%;
    .a10
      .banner
        width: calc(100vw*(254/640));
        height: calc(100vw*(261/640));
        position: absolute;
        top: calc(100vw*(81/640));
        left: calc(100vw*(68/640));
        background: url('~assets/c10_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(249/640));
        height: calc(100vw*(261/640));
        position: absolute;
        top: calc(100vw*(81/640));
        right: calc(100vw*(69/640));
        background: url('~assets/c10_2.png') no-repeat;
        background-size: 100% 100%;
      .t2
        width: calc(100vw*(254/640));
        height: calc(100vw*(225/640));
        position: absolute;
        top: calc(100vw*(342/640));
        left: calc(100vw*(68/640));
        background: url('~assets/c10_3.png') no-repeat;
        background-size: 100% 100%;
      .t3
        width: calc(100vw*(249/640));
        height: calc(100vw*(225/640));
        position: absolute;
        top: calc(100vw*(342/640));
        right: calc(100vw*(69/640));
        background: url('~assets/c10_4.png') no-repeat;
        background-size: 100% 100%;
      .t4
        width: calc(100vw*(254/640));
        height: calc(100vw*(194/640));
        position: absolute;
        top: calc(100vw*(567/640));
        left: calc(100vw*(68/640));
        background: url('~assets/c10_5.png') no-repeat;
        background-size: 100% 100%;
      .t5
        width: calc(100vw*(249/640));
        height: calc(100vw*(194/640));
        position: absolute;
        top: calc(100vw*(567/640));
        right: calc(100vw*(69/640));
        background: url('~assets/c10_6.png') no-repeat;
        background-size: 100% 100%;
      .t6
        width: calc(100vw*(336/640));
        height: calc(100vw*(56/640));
        position: absolute;
        top: calc(100vw*(795/640));
        right: calc(100vw*(146/640));
        background: url('~assets/c10_7.png') no-repeat;
        background-size: 100% 100%;
    .a11
      .banner
        width: calc(100vw*(566/640));
        height: calc(100vw*(751/640));
        position: absolute;
        top: calc(100vw*(71/640));
        left: calc(100vw*(37/640));
        background: url('~assets/c11_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(280/640));
        height: calc(100vw*(36/640));
        position: absolute;
        top: calc(100vw*(302/640));
        left: calc(100vw*(175/640));
        background: url('~assets/c11_2.png') no-repeat;
        background-size: 100% 100%;
      .showBtn
        width: calc(100vw*(32/640));
        height: calc(100vw*(34/640));
        position: absolute;
        top: calc(100vw*(363/640));
        left: calc(100vw*(41/640));
        background: url('~assets/c11_3.png') no-repeat;
        background-size: 100% 100%;
        z-index: 3000;
        border: 30px solid transparent;
        color:transparent;
        margin-left: -30px;
        margin-top: -30px;
      .icon-box
        width: 100vw;
        height: calc(100vw*(10/640));
        text-align: center;
        position: absolute;
        top: calc(100vw*(607/640));
        z-index: 3000;
        .icon
          display: inline-block;
          width: calc(100vw*(10/640));
          height: calc(100vw*(10/640));
          margin: 0 calc(100vw*(3.5/640));
        .act
          background: url('~assets/act.png') no-repeat;
          background-size: 100% 100%;
        .unact
          background: url('~assets/unact.png') no-repeat;
          background-size: 100% 100%;
      .t4
        width: calc(100vw*(84/640));
        height: calc(100vw*(29/640));
        position: absolute;
        top: calc(100vw*(640/640));
        left: 50%;
        transform: translateX(-50%);
      .text_1
        background: url('~assets/c11_4.png') no-repeat;
        background-size: 100% 100%;
      .text_2
        background: url('~assets/c11_5.png') no-repeat;
        background-size: 100% 100%;
      .text_3
        background: url('~assets/c11_6.png') no-repeat;
        background-size: 100% 100%;
    .a12
      .banner
        width: calc(100vw*(574/640));
        height: calc(100vw*(744/640));
        position: absolute;
        top: calc(100vw*(79/640));
        left: calc(100vw*(33/640));
        background: url('~assets/c12_1.png') no-repeat;
        background-size: 100% 100%;
      .t1
        width: calc(100vw*(574/640));
        height: calc(100vw*(744/640));
        position: absolute;
        top: calc(100vw*(79/640));
        left: calc(100vw*(33/640));
        background: url('~assets/c12_2.png') no-repeat;
        background-size: 100% 100%;
    .a13
      .fade-shot-enter-active
        transition: all 0.3s cubic-bezier(1, 0.5, 0.3, 0.1);
        opacity: 1;
      .fade-shot-enter
        opacity: 0;
      .slide-into-enter-active
        transition: all 0.5s cubic-bezier(1, 0.5, 0.3, 0.1 );
      .slide-into-enter
        transform: translateX(calc(-100vw*(572/640)));
        opacity: 0;
      .banner
        width: calc(100vw*(285/640));
        height: calc(100vw*(688/640));
        position: absolute;
        top: calc(100vw*(112/640));
        left: calc(100vw*(16/640));
        background: url('~assets/c13_1.png') no-repeat;
        background-size: 100% 100%;
      .round-icon
        width: calc(100vw*(200/640));
        height: calc(100vw*(35/640));
        background: url('~assets/ir.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
      .s1
        position: absolute;
        top: calc(100vw*(118/640));
        left: calc(100vw*(139/640));
      .t1
        width: calc(100vw*(157/640));
        height: calc(100vw*(35/640));
        background: url('~assets/c14_1.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
      .s2
        position: absolute;
        top: calc(100vw*(184/640));
        left: calc(100vw*(186/640));
      .t2
        width: calc(100vw*(158/640));
        height: calc(100vw*(37/640));
        background: url('~assets/c14_2.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
      .s3
        position: absolute;
        top: calc(100vw*(254/640));
        left: calc(100vw*(225/640));
      .t3
        width: calc(100vw*(129/640));
        height: calc(100vw*(36/640));
        background: url('~assets/c14_3.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
      .s4
        position: absolute;
        top: calc(100vw*(323/640));
        left: calc(100vw*(255/640));
      .t4
        width: calc(100vw*(133/640));
        height: calc(100vw*(37/640));
        background: url('~assets/c14_4.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
      .s5
        position: absolute;
        top: calc(100vw*(392/640));
        left: calc(100vw*(269/640));
      .t5
        width: calc(100vw*(132/640));
        height: calc(100vw*(37/640));
        background: url('~assets/c14_5.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
      .s6
        position: absolute;
        top: calc(100vw*(461/640));
        left: calc(100vw*(269/640));
      .t6
        width: calc(100vw*(132/640));
        height: calc(100vw*(37/640));
        background: url('~assets/c14_6.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
      .s7
        position: absolute;
        top: calc(100vw*(530/640));
        left: calc(100vw*(244/640));
      .t7
        width: calc(100vw*(140/640));
        height: calc(100vw*(39/640));
        background: url('~assets/c14_7.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
      .s8
        position: absolute;
        top: calc(100vw*(596/640));
        left: calc(100vw*(210/640));
      .t8
        width: calc(100vw*(162/640));
        height: calc(100vw*(39/640));
        background: url('~assets/c14_8.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
      .s9
        position: absolute;
        top: calc(100vw*(669/640));
        left: calc(100vw*(163/640));
      .t9
        width: calc(100vw*(145/640));
        height: calc(100vw*(40/640));
        background: url('~assets/c14_9.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
      .s10
        position: absolute;
        top: calc(100vw*(740/640));
        left: calc(100vw*(106/640));
      .t10
        width: calc(100vw*(193/640));
        height: calc(100vw*(37/640));
        background: url('~assets/c14_10.png') no-repeat;
        background-size: 100% 100%;
        display: inline-block;
    .bottom
      width: calc(100vw*(608/640));
      height: calc(100vw*(56/640));
      position: absolute;
      left: 50%;
      top: calc(100vw*(886/640));
      margin-left: calc(-50vw*(608/640));
      background: url('~assets/b3.png') no-repeat;
      background-size: 100% 100%;
    .flower,.flowerP
      width: calc(100vw*(33/640));
      height: calc(100vw*(33/640));
      position: absolute;
      top: calc(100vw*(826/640));
      opacity: 0;
      animation:shin linear 2s infinite both;
      border: 30px solid transparent;
      margin-top: -30px;
      z-index: 1000;
    .flower
      background: url('~assets/f3.png') no-repeat;
      background-size: 100% 100%;
      right: calc(100vw*(97/640));
      margin-right: -30px;
    .flowerP
      background: url('~assets/f4.png') no-repeat;
      background-size: 100% 100%;
      left: calc(100vw*(97/640));
      margin-left: -30px;
.scroll-wrapper
  width: calc(100vw*(566/640));
  height: calc(100vw*(250/640));
  overflow: hidden;
  top: calc(100vw*(355/640));
  left: calc(100vw*(37/640));
  position: relative;
  z-index: 1000;
  .scroll-contianer
    width: calc(100vw*(2264/640));
    height: calc(100vw*(250/640));
    .img
      width: calc(100vw*(566/640));
      height: calc(100vw*(250/640));
      float: left;
.img-box
  position: absolute;
  top:0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200000;
  background: rgba(0,0,0,0.8)
  background-size: 100% 100%;
  img
    height: 100%;
@media only screen and (device-aspect-ratio:3/4),
only screen and (device-aspect-ratio:512/683)
  .page4
    height: 100%;
    .gif
      height: 100%;
      top: -50%;
      transform: translateY(50%);
      margin-top: 0;
    .contant
      height: 100%;
      top: -50%;
      transform: translateY(50%);
      margin-top: 0;
      .head
        top: calc(100%*(9/800));
      .main
        height: calc(100%*(664/800));
        top: calc(100%*(63/800));
      .m3
        background: url('~assets/ipad/m3.png') no-repeat;
        background-size: 100% 100%;
      .m4
        background: url('~assets/ipad/m4.png') no-repeat;
        background-size: 100% 100%;
      .index
        .text
          width: calc(100vw*(495/640));
          height: calc(100%*(212/800));
          top: calc(100%*(276/800));
          left: calc(100vw*(73/640));
      .a1
        .banner
          width: calc(100vw*(423/640));
          height: calc(100%*(294/800));
          top: calc(100%*(77/800));
          left: calc(100vw*(110/640));
          background: url('~assets/ipad/c1_1.png') no-repeat;
          background-size: 100% 100%;
        .t1
          width: calc(100vw*(278/640));
          height: calc(100%*(273/800));
          top: calc(100%*(390/800));
          left: calc(100vw*(110/640));
          background: url('~assets/ipad/c1_2.png') no-repeat;
          background-size: 100% 100%;
        .t2
          width: calc(100vw*(130/640));
          height: calc(100%*(273/800));
          top: calc(100%*(390/800));
          right: calc(100vw*(110/640));
          background: url('~assets/ipad/c1_3.png') no-repeat;
          background-size: 100% 100%;
        .t3
          width: 100%;
          height: calc(100%*(35/294));
          background:#fff url('~assets/ipad/c1_4.png') no-repeat;
          background-size: 100% 100%;
        .t4
          width: 100%;
          height: calc(100%*(35/273));
          background:#fff url('~assets/ipad/c1_5.png') no-repeat;
          background-size: 100% 100%;
        .t5
          width: 100%;
          height: calc(100%*(35/273));
          background:#fff url('~assets/ipad/c1_6.png') no-repeat;
          background-size: 100% 100%;
      .a2
        .banner
          width: calc(100vw*(466/640));
          height: calc(100%*(293/800));
          top: calc(100%*(77/800));
          left: calc(100vw*(86/640));
        .t1
          width: calc(100vw*(466/640));
          height: calc(100%*(289/800));
          top: calc(100%*(375/800));
          left: calc(100vw*(86/640));
      .a3
        .banner
          width: calc(100vw*(402/640));
          height: calc(100%*(189/800));
          top: calc(100%*(77/800));
          left: calc(100vw*(120/640));
        .t1
          width: calc(100vw*(402/640));
          height: calc(100%*(194/800));
          top: calc(100%*(273/800));
          left: calc(100vw*(120/640));
        .t2
          width: calc(100vw*(402/640));
          height: calc(100%*(194/800));
          top: calc(100%*(474/800));
          left: calc(100vw*(120/640));
      .a4
        .banner
          width: calc(100vw*(488/640));
          height: calc(100%*(282/800));
          top: calc(100%*(77/800));
          left: calc(100vw*(76/640));
        .t1
          width: calc(100vw*(488/640));
          height: calc(100%*(40/282));
          background:#fff url('~assets/ipad/c4_2.png') no-repeat;
          background-size: 100% 100%;
        .t2
          width: calc(100vw*(488/640));
          height: calc(100%*(282/800));
          top: calc(100%*(373/800));
          left: calc(100vw*(76/640));
        .t3
          width: calc(100vw*(488/640));
          height: calc(100%*(40/282));
          background:#fff url('~assets/ipad/c4_4.png') no-repeat;
          background-size: 100% 100%;
      .a5
        .round1
          width: calc(100vw*(191/640));
          height: calc(100vw*(191/640));
          top: calc(100%*(159/800));
          right: calc(100vw*(155/640));
          .t2
            width: calc(100vw*(63/640));
            height: calc(100%*(31/191));
            margin-top: calc(-50%*(31/191));
            margin-left: calc(-50vw*(63/640));
            background: url('~assets/ipad/c5_2.png') no-repeat;
            background-size: 100% 100%;
        .t3
          width: calc(100vw*(208/640));
          height: calc(100%*(91/800));
          top: calc(100%*(94/800));
          left: calc(100vw*(96/640));
          background: url('~assets/ipad/c5_3.png') no-repeat;
          background-size: 100% 100%;
        .round2
          width: calc(100vw*(237/640));
          height: calc(100vw*(237/640));
          top: calc(100%*(269/800));
          left: calc(100vw*(110/640));
          .t5
            width: calc(100vw*(61/640));
            height: calc(100%*(31/237));
            top: 50%;
            left: 50%;
            margin-top: calc(-50%*(31/237));
            margin-left: calc(-50vw*(61/640));
            background: url('~assets/ipad/c5_5.png') center center no-repeat;
            background-size: 100% 100%;
        .t6
          width: calc(100vw*(199/640));
          height: calc(100%*(92/800));
          top: calc(100%*(522/800));
          left: calc(100vw*(92/640));
          background: url('~assets/ipad/c5_6.png') no-repeat;
          background-size: 100% 100%;
        .round3
          width: calc(100vw*(214/640));
          height: calc(100vw*(214/640));
          top: calc(100%*(344/800));
          right: calc(100vw*(96/640));
          .t8
            width: calc(100vw*(62/640));
            height: calc(100%*(30/214));
            top: 50%;
            left: 50%;
            margin-top: calc(-50%*(30/214));
            margin-left: calc(-50vw*(62/640));
            background: url('~assets/ipad/c5_8.png') no-repeat;
            background-size: 100% 100%;
        .t9
          width: calc(100vw*(211/640));
          height: calc(100%*(66/800));
          top: calc(100%*(600/800));
          right: calc(100vw*(110/640));
          background: url('~assets/ipad/c5_9.png') no-repeat;
          background-size: 100% 100%;
      .a6
        .banner
          width: calc(100vw*(287/640));
          height: calc(100%*(208/800));
          top: calc(100%*(268/800));
          left: calc(100vw*(176/640));
          background: url('~assets/ipad/c6_1.png') no-repeat;
          background-size: 100% 100%;
      .a7
        .banner
          width: calc(100vw*(453/640));
          height: calc(100%*(566/800));
          top: calc(100%*(77/800));
          margin-left: calc(-50vw*(453/640));
          background: url('~assets/c7_2.png') no-repeat;
          background-size: 100% 100%;
        .c7_gif
          width: calc(100vw*(168/640));
          height: calc(100%*(42/800));
          top: calc(100%*(604/800));
          margin: 0;
      .a8
        .banner
          width: calc(100vw*(449/640));
          height: calc(100%*(586/800));
          top: calc(100%*(77/800));
          left: calc(100vw*(97/640));
      .a9
        .banner
          width: calc(100vw*(449/640));
          height: calc(100%*(586/800));
          top: calc(100%*(77/800));
          left: calc(100vw*(97/640));
        .t1
          width: calc(100vw*(449/640));
          height: calc(100%*(31/586));
          background:#fff url('~assets/ipad/c9_2.png') no-repeat;
          background-size: 100% 100%;
      .a10
        .banner
          width: calc(100vw*(213/640));
          height: calc(100%*(210/800));
          top: calc(100%*(75/800));
          left: calc(100vw*(104/640));
          background: url('~assets/ipad/c10_1.png') no-repeat;
          background-size: 100% 100%;
        .t1
          width: calc(100vw*(220/640));
          height: calc(100%*(210/800));
          top: calc(100%*(75/800));
          right: calc(100vw*(102/640));
          background: url('~assets/ipad/c10_2.png') no-repeat;
          background-size: 100% 100%;
        .t2
          width: calc(100vw*(213/640));
          height: calc(100%*(177/800));
          top: calc(100%*(303/800));
          left: calc(100vw*(104/640));
          background: url('~assets/ipad/c10_3.png') no-repeat;
          background-size: 100% 100%;
        .t3
          width: calc(100vw*(220/640));
          height: calc(100%*(177/800));
          top: calc(100%*(303/800));
          right: calc(100vw*(102/640));
          background: url('~assets/ipad/c10_4.png') no-repeat;
          background-size: 100% 100%;
        .t4
          width: calc(100vw*(213/640));
          height: calc(100%*(143/800));
          top: calc(100%*(485/800));
          left: calc(100vw*(104/640));
          background: url('~assets/ipad/c10_5.png') no-repeat;
          background-size: 100% 100%;
        .t5
          width: calc(100vw*(220/640));
          height: calc(100%*(143/800));
          top: calc(100%*(485/800));
          right: calc(100vw*(102/640));
          background: url('~assets/ipad/c10_6.png') no-repeat;
          background-size: 100% 100%;
        .t6
          width: calc(100vw*(346/640));
          height: calc(100%*(52/800));
          top: calc(100%*(661/800));
          left: calc(100vw*(146/640));
          background: url('~assets/ipad/c10_7.png') no-repeat;
          background-size: 100% 100%;
      .a11
        .banner
          width: calc(100vw*(465/640));
          height: calc(100%*(593/800));
          top: calc(100%*(76/800));
          left: calc(100vw*(90/640));
        .t1
          width: calc(100vw*(243/640));
          height: calc(100%*(36/800));
          top: calc(100%*(261/800));
          left: calc(100vw*(200/640));
          background: url('~assets/ipad/c11_2.png') no-repeat;
          background-size: 100% 100%;
        .t4
          width: calc(100vw*(76/640));
          height: calc(100%*(28/800));
          top: calc(100%*(529/800));
        .text_1
          background: url('~assets/ipad/c11_4.png') no-repeat;
          background-size: 100% 100%;
        .text_2
          background: url('~assets/ipad/c11_5.png') no-repeat;
          background-size: 100% 100%;
        .text_3
          background: url('~assets/ipad/c11_6.png') no-repeat;
          background-size: 100% 100%;
        .showBtn
          width: calc(100vw*(29/640));
          height: calc(100vw*(28/640));
          top: calc(100%*(312/800));
          left: calc(100vw*(94/640));
          background: url('~assets/ipad/c11_3.png') no-repeat;
          background-size: 100% 100%;
        .icon-box
          width: 100vw;
          height: calc(100vw*(10/640));
          text-align: center;
          position: absolute;
          top: calc(100%*(511/800));
          z-index: 3000;
      .a12
        .banner
          width: calc(100vw*(438/640));
          height: calc(100%*(593/800));
          top: calc(100%*(75/800));
          left: 50%;
          margin-left: calc(-50vw*(438/640));
        .t1
          width: calc(100vw*(438/640));
          height: calc(100%*(593/800));
          top: calc(100%*(75/800));
          left: calc(100vw*(101/640));
      .a13
        .banner
          width: calc(100vw*(288/640));
          height: calc(100%*(597/800));
          top: calc(100%*(84/800));
          left: calc(100vw*(16/640));
        .round-icon
          width: calc(100vw*(173/640));
          height: 100%;
          background: url('~assets/ipad/ir.png') no-repeat;
          background-size: 100% 100%;
        .s1
          top: calc(100%*(116/800));
          left: calc(100vw*(172/640));
          height: calc(100%*(21/800));
        .t1
          width: calc(100vw*(134/640));
          height: 100%;
          background: url('~assets/ipad/c14_1.png') no-repeat;
          background-size: 100% 100%;
        .s2
          top: calc(100%*(171/800));
          left: calc(100vw*(212/640));
          height: calc(100%*(20/800));
        .t2
          width: calc(100vw*(131/640));
          height:100%;
          background: url('~assets/ipad/c14_2.png') no-repeat;
          background-size: 100% 100%;
        .s3
          top: calc(100%*(225/800));
          left: calc(100vw*(252/640));
          height: calc(100%*(20/800));
        .t3
          width: calc(100vw*(114/640));
          height: 100%;
          background: url('~assets/ipad/c14_3.png') no-repeat;
          background-size: 100% 100%;
        .s4
          top: calc(100%*(279/800));
          left: calc(100vw*(277/640));
          height: calc(100%*(22/800));
        .t4
          width: calc(100vw*(115/640));
          height: 100%;
          background: url('~assets/ipad/c14_4.png') no-repeat;
          background-size: 100% 100%;
        .s5
          top: calc(100%*(333/800));
          left: calc(100vw*(290/640));
          height: calc(100%*(21/800));
        .t5
          width: calc(100vw*(115/640));
          height: 100%;
          background: url('~assets/ipad/c14_5.png') no-repeat;
          background-size: 100% 100%;
        .s6
          top: calc(100%*(388/800));
          left: calc(100vw*(290/640));
          height: calc(100%*(21/800));
        .t6
          width: calc(100vw*(115/640));
          height: 100%;
          background: url('~assets/ipad/c14_6.png') no-repeat;
          background-size: 100% 100%;
        .s7
          top: calc(100%*(442/800));
          left: calc(100vw*(290/640));
          height: calc(100%*(22/800));
        .t7
          width: calc(100vw*(119/640));
          height: 100%;
          background: url('~assets/ipad/c14_7.png') no-repeat;
          background-size: 100% 100%;
        .s8
          top: calc(100%*(496/800));
          left: calc(100vw*(269/640));
          height: calc(100%*(22/800));
        .t8
          width: calc(100vw*(130/640));
          height: 100%;
          background: url('~assets/ipad/c14_8.png') no-repeat;
          background-size: 100% 100%;
        .s9
          top: calc(100%*(551/800));
          left: calc(100vw*(244/640));
          height: calc(100%*(22/800));
        .t9
          width: calc(100vw*(115/640));
          height: 100%;
          background: url('~assets/ipad/c14_9.png') no-repeat;
          background-size: 100% 100%;
        .s10
          top: calc(100%*(606/800));
          left: calc(100vw*(213/640));
          height: calc(100vw*(21/640));
        .t10
          width: calc(100vw*(157/640));
          height: 100%;
          background: url('~assets/ipad/c14_10.png') no-repeat;
          background-size: 100% 100%;
      .bottom
        height: calc(100%*(56/800));
        top:calc(100%*(735/800));
        background: url('~assets/ipad/b3.png') no-repeat;
        background-size: 100% 100%;
      .flower,.flowerP
        top: calc(100%*(673/800));
      .flower
        right: calc(100vw*(108/640));
      .flowerP
        left: calc(100vw*(108/640));
  .scroll-wrapper
    width: calc(100vw*(465/640));
    height: calc(100%*(201/800));
    overflow: hidden;
    top: calc(100%*(308/800));
    left: calc(100vw*(90/640));
    position: absolute;;
    z-index: 1000;
    .scroll-contianer
      width: calc(100vw*(1860/640));
      height: 100%;
      overflow: hidden;
      .img
        width: calc(100vw*(465/640));
        height: 100%;
        float: left;
  .img-box
    height: 100%;
</style>
